<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/login.css">

    <script type="text/javascript" src="../static/js/login.js"></script>

</head>
<style>
    .login-form a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}
</style>
<body>

    <div class="htmleaf-container" >
        <div class="container">

            <div class="col"></div>
            <div class="col">
                <div class="alert alert-danger invisible" role="alert">
                    <strong>提示!</strong>
                    <font id="msgId">错误！</font>
                </div>
            </div>
            <div class="col"></div>
            <h1>Welcome</h1>
            <form class="login-form" action="javascript:void(0);">
                <h1>Login</h1>
                <div class="form-field">
                    <i class="fas fa-user"></i>
                    <input type="text" name="username" id="username" class="form-field" pattern="^[a-zA-Z0-9_-]{1,16}$"
                        placeholder=" " required>
                    <label for="username">Username</label>
                </div>
                <div class="form-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" name="password" id="password" class="form-field" placeholder=" " required>
                    <label for="password">Password</label>
                </div>
                <button type="button" value="Login" class="btn" onclick="jump()">Login</button>

                <a href="/views/register.html" style="font-family: 楷体;">没有账号，点此注册</a>
            </form>
        </div>
    </div>

    <script type="text/javascript" src="../static/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascropt" src="../static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/js/canvas-particle.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script>
        $('#login-button').click(function (event) {
            event.preventDefault();
            $('form').fadeOut(500);
            $('.wrapper').addClass('form-success');
        });
    </script>

    <!--     <div style="text-align:center;color:#faf6f6;margin-top: 5px;font-family: 楷体;background-color: #858282;padding-top: 1%;">
    <h1>欢迎使用问卷调查系统</h1> -->
    </div>

    <script>
        function jump() {
            let uid = $('#username').val();
            let pwd = $('#password').val();
            console.log(uid);
            console.log(pwd);

            if (uid.length > 0 && pwd.length > 0) {
                axios({
                    method: 'post',
                    url: '/loginDone',
                    data: {
                        username: uid,
                        password: pwd
                    },
                }).then(function (res) {
                    res = res.data;
                    if (res.code === 200) {
                        window.location.href = '/';
                    } else {
                        alert_fn(res.msg);
                        console.log(res.msg);
                    }
                }).catch((err) => {
                    alert_fn(err);
                    console.log(err);
                });
            } else {
                alert_fn('用户名、密码不能为空');
            }
        }

        // 包装了显示（以及自动隐藏）消息警告的动作
        function alert_fn(msg) {
            $('#msgId').text(msg);
            $('.alert').removeClass('invisible');
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000);
        }
    </script>
</body>


</html>